<template>
    <div class="read-container">
        <!-- 1. 头部信息 -->
        <div class="header-container">
            <h5 class="title">
                有声书
            </h5>
            <hr>
            <p class="desc">
                联合各领域名师大家精心打造课程专栏，提升中国少年的综合素养，建立光靠做题无法培养的竞争力。
            </p>
        </div>
        <!-- 2. 全部书籍按钮 -->
        <div class="read-btn">
            <p>
                全部书籍
            </p>
        </div>
        <!-- 3. 读书会列表 -->
        <div class="read-list-container">
            <router-link to="/book-detail" class="list-item" v-for="(item,i) of readList" :key="i" tag="div">
                <div class="top-container">
                    <span>上新</span>
                    <img src="../../images/read_item_play.png">
                </div>
                <div class="bottom-container">
                    <p>小鸡喔喔叫</p>
                    <span>¥ 4.99</span>
                </div>
            </router-link>
        </div>
        <!-- 分页加载 -->
        <div class="load-more-container">
            <span>没有更多了，不要再拉啦～</span>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      readList: [{}, {}, {}, {}, {}, {}, {}, {}, {}]
    };
  }
};
</script>
<style lang="scss" scoped>
.read-container {
  display: flex;
  flex-direction: column;
  background-color: white;
  //头部样式
  .header-container {
    display: flex;
    flex-direction: column;
    background-color: #f6c26b;
    color: white;
    padding: 20px;
    h5 {
      font-size: 24px;
      line-height: 28px;
      padding-top: 28px;
      margin: 0;
      font-weight: 300;
    }
    hr {
      margin: 0;
      margin-top: 20px;
      border: none;
      height: 2px;
      background-color: white;
      width: 32px;
    }
    p {
      margin: 20px 0 0 0;
      font-size: 12px;
    }
  }
  //中间按钮样式
  .read-btn {
    position: sticky;
    top: 0px;
    z-index: 2004;
    width: 100%;
    background-color: white;
    p {
      margin: 20px 0 0 20px;
      color: white;
      text-align: center;
      line-height: 32px;
      font-size: 12px;
      width: 104px;
      border-radius: 10px;
      height: 32px;
      background-color: rgb(255, 163, 47);
    }
  }
  //列表样式
  .read-list-container {
    padding: 0 2.66666667% 0 2.53333333%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin-top: 20px;
    box-sizing: border-box;
    .list-item {
      display: flex;
      flex-direction: column;
      width: 33.33333333%;
      padding: 0 2.81293952% 32px 2.9535865%;
      box-sizing: border-box;
    }
    .top-container {
      position: relative;
      background-color: #fde3e3;
      border-radius: 10px;
      width: 100%;
      height: 0;
      padding-bottom: 130.6122449%;
      span {
        position: absolute;
        bottom: 0;
        left: 0;
        border-bottom-left-radius: 10px;
        border-top-right-radius: 10px;
        background-color: red;
        padding: 3px 12px;
        font-size: 12px;
        color: white;
      }
      img {
        position: absolute;
        bottom: 5px;
        right: 5px;
        width: 28px;
        height: 28px;
      }
    }
    .bottom-container {
      display: flex;
      flex-direction: column;
      p {
        font-size: 12px;
        color: rgb(22, 35, 60);
        margin: 10px 0 0 0;
      }
      span {
        font-size: 12px;
        color: rgb(255, 163, 47);
        margin-top: 8px;
      }
    }
  }
  .load-more-container {
    width: 100%;
    text-align: center;
    height: 32px;
    font-size: 12px;
    margin-bottom: 32px;
    color: rgb(200, 200, 200);
  }
}
</style>
